<template>
	<view class="page">
		<nav-bar title="会员卡" bgColor="#FFF" titleColor="#000" @goBack="goBack"></nav-bar>
		<view class="title">
			<view class="flex padding justify-between">
				<view class="flex align-center" v-if="userInfo">
					<image class="head-img" :src="userInfo.avatar" mode="aspectFill" @click="handleToAvatar" />
					<view @click="handleToInfo" class="user-info">
						<view class="u_title">
							{{ userInfo.userName }}
						</view>
					</view>
				</view>
				<view class="flex align-center" v-else>
					<view class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<view @click="handleToLogin" class="login-tip">游客</view>
				</view>
			</view>
			<view class="introduce">
				<view class="item-b">
					累计为您节省：<span class="dollol">{{ economizeMoney }}</span>元
				</view>
				<view class="item-b " style="color: #ead39d;font-weight: 600;"
				@click="pageTo">
					购买记录
				</view>
			</view>
		</view>

		<view class="card-title">
			我的会员卡
		</view>
		<scroll-view scroll-y :style="{ height: scrollHeight }" class="card">
			<view v-if="isLoading" class="common-loading">
				<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
			</view>

			<view v-else-if="couponList && couponList.length">
				<card-item v-for="(item, index) in couponList" :key="index" :cardItem="item"
					@click="clickToDetail(item)"></card-item>
			</view>
			<view v-else class="common-no-data">
				<image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
				<view class="text">暂无会员卡</view>
			</view>
		</scroll-view>

		<view class="button" :style="{ height: (70 + safeHeight) + 'px', paddingBottom: safeHeight + 'px' }">
			<view class="button-item" @click="clickChooseShop">选择购买门店</view>
		</view>

		<you-popup :popupVisible="popupVisible" :titleSlot="true" popupType="bottom" dialogWidth="100%" :showBtn="false"
			@popupClose="popupVisible = false">
			<template slot="popupTitle">
				<view class="popup-title">
					<view class="title-text">选择门店</view>
					<view class="city-box"></view>
				</view>
			</template>
			<view slot="popupContent" class="shop-content">
				<view class="content-list">
					<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="clickShopItem(item)">
						<view class="label">{{ item.storeName }}</view>
						<view class="check-box">
							<uni-icons v-if="storeId === item.id" type="checkbox-filled" color="#c27e15"
								size="24"></uni-icons>
							<uni-icons v-else type="circle" color="#9e9e9e" size="24"></uni-icons>
						</view>
					</view>
				</view>
				<view class="popup-button" @click="clickBuy">去购买</view>
			</view>
		</you-popup>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar'
	import YouPopup from '@/components/you-popup2'
	import CardItem from './components/cardItem.vue'
	import api_membership from '@/api/membership'
	import pageConfig from '@/config'
	export default {
		components: {
			NavBar,
			YouPopup,
			CardItem
		},
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				userInfo: null,
				safeHeight: '',
				scrollHeight: '',
				economizeMoney: '',
				couponList: [],
				isLoading: false,
				popupVisible: false,
				storeId: '',
				shopList: [],
				backUrl: '',
				chooseTechnician: [],
				transferData: {}
			}
		},
		onShow() {
			this.popupVisible = false
		},
		onLoad(options) {
			this.backUrl = options.backUrl
			this.userInfo = uni.getStorageSync('userInfo')
			this.safeHeight = this.$store.getters.heightData.safeHeight
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight.split('px')[0] - 275 + 'px'
			this.getCouponList()
		},
		methods: {
			pageTo(){
				uni.navigateTo({
					url:'/subPages/membership/RechargeRecord'
				})
			},
			goBack() {
				const confirmOrderConfig = uni.getStorageSync('confirmOrderConfig')
				if (confirmOrderConfig.backUrl) {
					const params = encodeURIComponent(JSON.stringify(confirmOrderConfig.chooseTechnician))
					const params2 = encodeURIComponent(JSON.stringify(confirmOrderConfig.transferData))
					uni.redirectTo({
						url: this.backUrl + `?chooseData=${params}&transferData=${params2}`
					})
				} else {
					uni.switchTab({
						url: '/pages/mine/index'
					})
				}
			},
			getCouponList() {
				this.isLoading = true
				api_membership.fetchMemberList().then(res => {
					this.isLoading = false
					if (res.code !== 200) return
					this.economizeMoney = res.data.economizeMoney
					const resList = res.data.zyMemberList
					this.couponList = resList
				}).catch(err => {
					this.isLoading = false
				})
			},
			// 充值门店列表
			getRechargeShopList() {
				const params = {
					latitude: this.$store.getters.cityData.latitude,
					longitude: this.$store.getters.cityData.longitude
				}
				api_membership.rechargeShopList(params).then(res => {
					if (res.code !== 200) return
					this.shopList = res.data
					this.storeId = res.data[0].id
				})
			},
			async clickChooseShop() {
				await this.getRechargeShopList()
				this.popupVisible = true
			},
			clickShopItem(item) {
				this.storeId = item.id
			},
			clickToDetail(item) {
				this.$tab.navigateTo(`/subPages/membership/membershipDetail?id=${item.id}`)
			},
			clickBuy() {
				const aa=this.couponList.find(el=>el.storeId==this.storeId)
				console.log(this.storeId,aa);
				if(aa){
					this.$tab.navigateTo(`/subPages/membership/membershipList?storeId=${this.storeId}&id=${aa.ruleId}`)
				}else{
					this.$tab.navigateTo(`/subPages/membership/membershipList?storeId=${this.storeId}`)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.page {
		.title {
			height: 165px;
			padding: 15px 15px 15px 15px;
			background-color: #2B345A;
			color: black;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
				color: #fff;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;
				color: #fff;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}

			.introduce {
				color: #fff;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-b {
					.dollol {
						color: #FAE19E;
						font-size: 43rpx;
					}
				}
			}
		}

		.card-title {
			height: 40px;
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			font-size: 36rpx;
			font-weight: bold;
			font-family: Source Han Sans CN, Source Han Sans CN;
		}

		.card {
			padding: 0 36rpx;
		}

		.button {
			position: fixed;
			width: 100%;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 13rpx #ADADAD;
			opacity: 1;
			box-sizing: border-box;

			.button-item {
				width: 671rpx;
				height: 94rpx;
				background: linear-gradient(90deg, #EDD3AE 0%, #DCB17F 100%);
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				opacity: 1;
				text-align: center;
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				line-height: 94rpx;
			}
		}
	}

	.popup-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #f2f2f2;
	}

	.shop-content {
		padding: 0 24rpx;

		.content-list {
			max-height: 540rpx;
			overflow-y: scroll;
		}

		.shop-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 6rpx;
			border-bottom: 2rpx solid #f2f2f2;

			.label {
				font-weight: bold;
			}
		}

		.popup-button {
			width: 90%;
			height: 80rpx;
			margin: 30rpx auto 0;
			background: linear-gradient(90deg, #EDD3AE 0%, #DCB17F 100%);
			border-radius: 63rpx 63rpx 63rpx 63rpx;
			opacity: 1;
			text-align: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			line-height: 94rpx;
			margin-bottom: 30rpx;
		}
	}
</style>